<template>
  <div>
    <van-tabs class="film-tabbar" :class="{ topnav: top > 150 ? true : false }" v-model="active">
      <van-tab :title-style="active === 0 ? 'color:#ff5f16' : ''" title="正在热映" to="/films/nowplaying" />
      <van-tab :title-style="active === 1 ? 'color:#ff5f16' : ''" title="即将上映" to="/films/comingsoon" />
    </van-tabs>

    <!-- 
      电影嵌套路由的容器 
      条件渲染 include /exclude  使用它们时一定要给组件起名称(name)
    -->
    <keep-alive :include="['nowplaying']">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
// 全部导入 打包时会把所有的lodash文件打包到js文件中
// 按需加载
import _ from 'lodash/function'
export default {
  data() {
    return {
      active: 0,
      top: 0,
    }
  },
  created() {
    this.active = this.$route.path.includes('comingsoon') ? 1 : 0
  },
  // 监听的有点的慢
  /* watch:{
    '$route'(n,o){
      console.log(n)
    }
  }, */
  mounted() {
    // 节流
    window.addEventListener(
      'scroll',
      _.throttle(() => {
        this.top = document.documentElement.scrollTop
      }, 600)
    )
  },
}
</script>


<style lang="scss" scoped>
/* scoped css的作用域,让每个组件中的css都相互不影响 */
.film-tabbar {
  // 穿透 less node-sass /deep/ 或 >>>  dart-sass ::v-deep
  ::v-deep.van-tabs__line {
    background-color: #ff5f16;
  }
}
.topnav {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
}
</style>